<template>
	<view class="distribution">
		<u-navbar :is-back="false" :background="background" height="200">
			<view class="slot-wrap">
				<view class="title">商城分配</view>
				<view class="navContent">
					<view class="navContent-item">
						<view class="navName">糖果统计</view>
						<view class="navNum">
							<u-count-to bold color="white" font-size="30" :start-val="0"
								:end-val="recordSweetSum==null?0:recordSweetSum" :decimals="2"></u-count-to>
						</view>
					</view>
					<view class="navContent-item">
						<view class="navName">暂存金额</view>
						<view class="navNum">
							<u-count-to bold color="white" font-size="30" :start-val="0"
								:end-val="temporaryStorageAmount==null?0:temporaryStorageAmount" :decimals="2">
							</u-count-to>
						</view>
					</view>
					<view class="navContent-item">
						<view class="navName">现金统计</view>
						<view class="navNum">
							<u-count-to bold color="white" font-size="30" :start-val="0"
								:end-val="recordAmountSum==null?0:recordAmountSum" :decimals="2"></u-count-to>
						</view>
					</view>
				</view>
				
				<view style="width: 100%;position: absolute;bottom: 0;">
					<u-dropdown ref="uDropdown" :style="{'backgroundColor':active?'#357CD4':'#ffffff' }"
						:inactive-color="active?'#ffffff':'#333'">
						<u-dropdown-item title="订单号">
							<view class="slot-content" style="background-color: #FFFFFF;">
								<u-section title="订单号" :right="false"></u-section>
								<view class="sctionContent">
									<u-input v-model="form.orderNo" type="text" border placeholder="请选择订单号" />
								</view>
								<u-button shape="circle" class="ubtn" type="primary" @click="closeDropdown">确定</u-button>
							</view>
						</u-dropdown-item>
						<u-dropdown-item title="下单日期">
							<view class="slot-content" style="background-color: #FFFFFF;">
								<scroll-view scroll-y="true">
									<u-section title="下单日期" :right="false"></u-section>
									<view class="sctionContent">
										<view>
											<u-input v-model="form.startDate" type="select" border placeholder="请选择开始日期"
												@click="show = true" />
										</view>
										<view style="padding:0 20rpx;">-</view>
										<view>
											<u-input v-model="form.endDate" type="select" border placeholder="请选择结束日期"
												@click="show = true" />
										</view>
									</view>
								</scroll-view>
								<u-row gutter="16" justify="space-between">
									<u-col span="6">
										<u-button shape="circle" class="ubtn" type="primary" @click="closeDropdown">确定</u-button>
									</u-col>
									<u-col span="6">
										<u-button shape="circle" type="default" @click="chongzhi">重置</u-button>
									</u-col>
								</u-row>
							</view>
						</u-dropdown-item>
					</u-dropdown>
				</view>
			</view>
		</u-navbar>
		
		
		
		<view v-if="List.length > 0">
			<u-card box-shadow="0px 0px 24rpx 0px rgba(150, 150, 150, 0.17)" border-radius="8" padding="20"
				sub-title-color="#357CD4" sub-title-size="28" :border="false" v-for="(item,index) in List" :key='index'>
				<view slot="head">
					<view style="font-weight: bold;font-size: 28rpx;">订单号：{{item.orderNo}}</view>
				</view>
				<view slot="body">
					<view class="u-flex u-row-between u-padding-top-10 u-padding-bottom-10">
						<view>分配金额：<text class="u-type-primary-dark">¥ {{item.distributionAmount}}</text></view>
						<view>分配糖果：<text class="u-type-primary-dark">{{item.distributionSweet}}</text></view>
					</view>
					<view class="u-flex u-row-between u-padding-top-10 u-padding-bottom-10">
						<view>现金分配比例：{{item.allocationRatio}}%</view>
						<view>糖果分配比例：{{item.sweetAllocationRatio}}%</view>
					</view>
					<view class="u-flex u-row-between u-padding-top-10 u-padding-bottom-10">
						<view>暂存金额：{{item.temporaryStorageAmount}}</view>
						<view>服务费比例：{{item.serviceChargeRatio}}</view>
					</view>
					<view class="u-flex u-row-between u-padding-top-10 u-padding-bottom-10">
						<view>下单时间：{{item.createDate}}</view>
					</view>
				</view>
			</u-card>
			<view style="height: 80rpx;">
				<u-loadmore :status="status" />
			</view>
		</view>
		<view v-else style="padding-top: 120rpx;">
			<u-empty text="暂无数据"></u-empty>
		</view>
		<u-calendar v-model="show" :mode="mode" @change="timeOnchange"></u-calendar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active: false,
				show: false,
				mode: 'range',
				background: {
					background: 'url('+require('@/static/distribution/bg.png')+') no-repeat',
					backgroundSize: 'cover'
				},
				recordAmountSum: 0,
				recordSweetSum: 0,
				temporaryStorageAmount: 0,
				form: {
					startDate: '', //开始时间
					endDate: '', //结束时间
					orderNo: '', //订单号
				},
				page: 1,
				size: 5,
				List: [],
				total: 0,
				status: 'loadmore'
			}
		},
		mounted() {
			this.getData();
			this.getList();
		},
		onPullDownRefresh() {
			this.form = {
				startDate: '', //开始时间
				endDate: '', //结束时间
				orderNo: '', //订单号
			};
			this.List = [];
			this.page = 1;
			this.getData();
			this.getList();
		},
		onReachBottom() {
			if (this.List.length >= this.total) return;
			this.status = 'loading';
			this.page++;
			this.getList();
			setTimeout(() => {
				if (this.List.length >= this.total) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		methods: {
			getData() {
				this.$u.api.statisticsNums({
					merchantId: uni.getStorageSync('mid'),
					orderNo: this.form.orderNo,
					startDate: this.form.startDate,
					endDate: this.form.endDate
				}).then(res => {
					if (res.code == 0) {
						this.recordAmountSum = res.data.recordAmountSum;
						this.recordSweetSum = res.data.recordSweetSum;
						this.temporaryStorageAmount = res.data.temporaryStorageAmount;
					}
				});
			},
			getList() {
				this.$u.api.recordList({
					merchantId: uni.getStorageSync('mid'),
					orderNo: this.form.orderNo,
					startDate: this.form.startDate,
					endDate: this.form.endDate,
					page: this.page,
					size: this.size
				}).then(res => {
					if (res.code == 0) {
						this.List = [...this.List, ...res.data];
						this.total = res.extraInfo;
					}
				});
			},
			chongzhi() {
				this.form.startDate = '';
				this.form.endDate = '';
			},
			timeOnchange(e) {
				this.form.startDate = e.startDate;
				this.form.endDate = e.endDate;
			},
			closeDropdown() {
				this.List = [];
				this.getData();
				this.getList();
				this.$refs.uDropdown.close();
			}
		}
	}
</script>

<style scoped lang="scss">
	.distribution {
		.ubtn {
			background-color: #3583F0;
			color: white;
			box-shadow: 0px 12rpx 16rpx 0px rgba(28, 100, 224, 0.32)
		}

		.slot-wrap {
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			align-items: center;

			.title {
				color: white;
				font-size: 32rpx;
				font-weight: 700;
				padding-bottom: 30px;
			}

			.navContent {
				display: flex;
				align-items: center;
				justify-content: space-around;
				width: 100%;
				color: white;
				font-size: 32rpx;
				margin-bottom:40px;

				.navContent-item {
					text-align: center;

					.navName {
						padding-bottom: 30rpx;
					}

					.navNum {
						font-weight: bold;
					}
				}
			}
		}

		.slot-content {
			padding: 20rpx 30rpx;
		}

		.sctionContent {
			display: flex;
			align-items: center;
			padding: 30rpx 0;
		}
	}
</style>
